<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>无标题文档</title>



<script src="/js/vue.min.js"></script>

<script src="/elementui/index.js"></script>
<link href="/elementui/index.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="/js/axios.min.js"></script>
<link href="/css/layui.css" rel="stylesheet" type="text/css">  
<link href="/css/base.css" rel="stylesheet" type="text/css">  
</head>

<body style="margin: 13px;">
  <div id="loginDiv">
	<template>
		留言内容：<input type="text" v-model.trim="neirong" size="17"/>
		<input type="button" value="查询" @click="liuyanbanRes()" class="lanse" style="width: 86px;"/>
	</template>
	<table class="layui-table">
    <thead>
      <tr>
		<th>序号</th>
		<th>用户</th>
		<th>留言内容</th>
		<th>时间</th>

		<th>回复</th>
		<th>回复时间</th>
		<th>操作</th>
      </tr> 
    </thead>
    <tbody>
      <tr v-for="(liuyanban, index) in xianshilist" :key="liuyanban.id">
		<td>{{index+1}}</td>
		<td>{{liuyanban.user_id}}</td>
		<td>{{liuyanban.neirong}}</td>
		<td>{{liuyanban.liuyanshi}}</td>
		
		<td>{{liuyanban.huifu}}</td>
		<td>{{liuyanban.huifushi}}</td>
		<td>
			<input type="button" value="回复" class="lvse" @click="edit(liuyanban)" style="width: 66px;"/>
			<input type="button" value="删除" class="hongse" @click="del(liuyanban.id)" style="width: 66px;"/>
	    </td>
      </tr>
    </tbody>
    </table>

	<el-pagination background 
		 layout="total, prev, pager, next" 
		 :total="total" 
		 :page-size="pageSize"
		 :current-page="currentPage" 
		 @current-change="handleCurrentChange">
	</el-pagination>
	

    <el-dialog title="编辑" :visible.sync="dialogliuyanbanEdit" width="60%">
	<table width="100%"  border="0" cellpadding="8" cellspacing="1" bgcolor="#CBD8AC">
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td bgcolor="#FFFFFF" align="right">
                                                                                                                                                                 回复内容：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                &nbsp;<input type="text" v-model.trim="liuyanban.huifu" style="width: 388px;"/>
                                            </td>
                                        </tr>
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td bgcolor="#FFFFFF" align="right">
                                                                                                                                                                  回复时间：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                &nbsp;<input type="text" v-model="liuyanban.huifushi" style="width: 288px;"/>
                                            </td>
                                        </tr>
                                        
                                        <tr bgcolor="#FFFFFF" height="30">
                                            <td bgcolor="#FFFFFF" align="right">
                                                &nbsp;
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                            &nbsp;<input type="button" value="提交" @click="liuyanbanUpdate()" style="width: 70px;"/>&nbsp; 
                                            </td>
                                        </tr>
                                     </table>   
	</el-dialog>
	


  </div>
  


<script type="text/javascript">
	var vm = new Vue({
		
		el: '#loginDiv',
		data: 
		{
			total:0,
			pageSize:2,
			currentPage:1,//当前页

			liuyanbanList:[],
			xianshilist: null,	

			dialogliuyanbanEdit:false,
			liuyanban:{
			},

			/* 查询用的 */
			neirong:"",
			
		},
		methods: 
		{
			getData()
			{
               axios({
						method: 'POST',
						url: '/liuyanbanMana',
						params:{
							
						}
						}).then(data => {
							if (data.data.state == 66)
							{
								this.liuyanbanList=data.data.data;
								this.total=this.liuyanbanList.length;
								
	                            this.xianshilist = this.liuyanbanList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
							} 
						    
						}).catch(error => {
							alert(error);
			    })
			},
			
			handleCurrentChange(currentPage)//用户点的页码
			{
				var _this = this;
				if (_this.liuyanbanList) 
				{
				   if (currentPage)
				   {
                      _this.currentPage = currentPage;
                   }
                   _this.xianshilist = _this.liuyanbanList.slice((_this.currentPage - 1) * _this.pageSize,_this.currentPage * _this.pageSize);
                } else {}

			},

			
			
			edit(liuyanban)
			{
				this.liuyanban={...liuyanban};
				this.liuyanban.huifushi=this.formateDate(new Date(), 'yyyy-MM-dd hh:mm');
				this.dialogliuyanbanEdit=true;
			},

			liuyanbanUpdate()
			{
				if(this.liuyanban.huifu =="")
				{
					alert("请输入回复内容");return false;
				} 
				axios({
						method: 'POST',
						url: '/liuyanbanUpdate',
						data: this.liuyanban,
						/* params:{
							neirong:this.liuyanban.neirong,
							password:this.liuyanban.liuyanbanPw,
						} */
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("回复成功");
								this.dialogliuyanbanEdit=false;
								this.getData();
							}  
						    
						}).catch(error => {
							alert(error);
						})
			},
			
			del(id)
			{
				if(confirm('您确定删除吗？'))
				{
					axios({
						method: 'POST',
						url: '/liuyanbanDel',
						//data: this.liuyanban,
						params:{
							id:id,
						} 
						}).then(data => {
							if (data.data.state == 66)
							{
								alert("删除成功");
								this.currentPage=1;
								this.getData();
							}  
							
						}).catch(error => {
							alert(error);
					})
				}
			},

			liuyanbanRes()
			{
				axios({
						method: 'POST',
						url: '/liuyanbanRes',

						params:{
							neirong:this.neirong,
						}
						}).then(data => {
							if (data.data.state == 66)
							{
								this.liuyanbanList=data.data.data;
								this.total=this.liuyanbanList.length;
								
	                            this.xianshilist = this.liuyanbanList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
							} 
						    
						}).catch(error => {
							alert(error); 
					    
				})
				this.currentPage=1;
			},


			/* 获取系统时间 */
			padLeftZero (str)
			{
			return ('00' + str).substr(str.length);
			},

			formateDate(date, fmt)
			{
			if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
			}
			let o = {
			'M+': date.getMonth() + 1,
			'd+': date.getDate(),
			'h+': date.getHours(),
			'm+': date.getMinutes(),
			's+': date.getSeconds()
			}
			for (let k in o) {
			if (new RegExp(`(${k})`).test(fmt)) {
			let str = o[k] + '';
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
			}
			}
			return fmt;
			},
			/* 获取系统时间 */
			

		},
		created()
		{
			this.getData();
		}

	
	    
	})
</script>


<style>
    .el-pagination{
		text-align: right;
		padding-top: 20px;
	}
</style>

</body>
</html>
